import React, {useState} from 'react';
import {List, Card, Typography, Tag, Space} from 'antd';
import { Image } from 'antd';
import './Article.less';
import {ResumeArticleType} from "@/api/article"; // 引入LESS样式文件

const { Title, Paragraph } = Typography;
interface ArticlesListProps {
    articles: ResumeArticleType[];
}
const ArticlesList :React.FC<ArticlesListProps> = ({ articles }) => {
    const [ellipsis, setEllipsis] = useState(true);
    const renderItem = (article) => {
        return (
            <List.Item key={article.id}>
                <Space className="article-item">
                    <Card hoverable={false} bordered={false} className=" ant-card" style={{ width: '100%' ,boxShadow:"none"}}>
                    <Card.Meta
                               title={article.title} className="article-title"
                               description={<article className="article-description">
                                   {article.tagList.map((tag, index) => (
                                       <Tag key={index} color="blue">{tag}</Tag>
                                   ))}
                                   <Paragraph className="article-info"  ellipsis={ellipsis ? { rows: 2, } : false} style={{ marginTop: '8px' }}>
                                       {article.description}
                                   </Paragraph>
                                   <Paragraph  className="ant-typography">
                                       {article.createTime}
                                   </Paragraph>
                               </article>}
                    />
                    </Card>
                    <Image alt="article avatar" src={'http://localhost:8072'+article.titleImage}  preview={false} className="article-cover" />
                </Space>

            </List.Item>
        );
    };

    return (
        <List
            className="articles-list"
            dataSource={articles}
            renderItem={renderItem}
            bordered={false}
        />
    );
};

export default ArticlesList;